CSS3媒体查询+手机自适应

最新推荐文章于 2024-09-20 14:49:00 发布

nrskhdzl

最新推荐文章于 2024-09-20 14:49:00 发布

阅读量1.9k

点赞数 3

本文链接：https://blog.csdn.net/nrskhdzl/article/details/85016491

版权

媒体查询

媒体查询是可以让网页适用于不同大小屏幕的，写媒体查询时要注意：主样式在前，媒体查询样式在后。

媒体查询的条件写法，可以从小到大，也可以从大到小，也可以区间取值。

媒体查询的写法：@ media all/screen and (最小值/最大值/区间值)，all/screen表示所有屏幕尺寸，包括投影仪、打印机、手机、电脑等。

媒体查询的引入方式有两种：内嵌式和外联式。

内嵌式

<style>
        .block{
            height: 2000px;
            border: 1px solid red;
            margin: 0 auto;
        }

由小到大的区间取值写法：

        @media all and (min-width: 768px) and (max-width: 1024px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
        @media all and (min-width: 1024px) and (max-width: 1380px) {
            .block{
                width: 1024px;
                background-color: blue;
            }
        }
        @media all and (min-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }

由小到大的写法：

        @media all and (min-width: 768px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
        @media all and (min-width: 1024px) {
            .block{
                width: 768px;
                background-color: blue;
            }
        }
        @media all and (min-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }*/

由大到小的写法：

        @media all and (max-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }

        @media all and (max-width: 1024px) {
            .block{
                width: 768px;
                background-color: blue;
            }
        }

        @media all and (max-width: 768px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }

    </style>
</head>
<body>
<div class="block">

</div>
</body>

外联式

<title></title>
    <link rel="stylesheet" media="all and (min-width:320px) and (max-width:767px)" href="320.css">
    <link rel="stylesheet" media="all and (min-width:768px) and (max-width:1023px)" href="768.css">
    <link rel="stylesheet" media="all and (min-width:1024px)" href="1024.css">
</head>

手机自适应

它的作用是覆盖默认的画布（网页）缩放设置，用viewport meta表示，也就是在hear部分再加一个<meta>值，一个网页里面可以有多个<meta>.写法如下：

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

其中：name="viewport"表示这个meta的属性是“视口”的意思

content="width=device-width表示适可的宽度（浏览器页面的宽度等于设备宽度）

initial-scale=1.0表示伸缩比例为1:0（即将页面放大一倍）

minimum-scale=1.0,maximum-scale=1.0表示最小放大比例为1和最大放大比例为1（即将页面最大放大至设备宽度1倍，最小压缩至设备宽度的一倍）

user-scalable=no其中 user-scalable表示用户适可缩放，那整个意思表示禁止用户缩放

强制性兼容：

不同浏览器兼容样式：

-ms- IE浏览器（+ * _表示不同版本IE浏览器）

-moz-火狐

-webkit-谷歌

 <style>
        *{
            width: 100px;
            +width:100px;
            *width:100px;
            _width:100px;

            border-radius: 10px;
            -ms-border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
    </style>

css hank 是不同版本IE浏览器的兼容：

只在IE下生效：

只在IE6下生效：

只在IE6以上版本生效：

只在IE6上不生效：

非IE浏览器生效：

正常情况下，在缩放网页宽度时会出现滚动条，要想不出现滚动条就需要对网页写入媒体查询。一般用来检测手机媒体查询的页面宽度为320px。